<template>
  <div>
    <!-- <div class="toptitle">角色列表</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称">
         <br> <br>
        <el-input v-model="formInline.roleName" placeholder @keyup.enter.native="search"   style="margin-left:-60px;width:200px"></el-input>
      </el-form-item>
      <el-form-item label="账号分类">
         <br> <br>
        <el-select v-model="formInline.roleType" @keyup.enter.native="search"   style="margin-left:-60px;width:200px">
          <el-option label="全部" value></el-option>
          <el-option label="超级管理员账号" value="1"></el-option>
          <el-option label="普通应用账号" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left:950px;text-align:right;">
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      <!-- </el-form-item>
      <el-form-item> -->
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      <!-- </el-form-item>
      <el-form-item> -->
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增角色</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增</el-button>
      </el-form-item>-->
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%"
      :header-cell-style="{background:'#ebecf0',color:'#606266'}"
    >
      <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
      <el-table-column prop="roleName" label="角色名称" header-align="center"></el-table-column>
      <!-- <el-table-column prop="rolereq" label="角色编码" header-align="center"></el-table-column> -->
      <el-table-column prop="roleType" label="账号分类" header-align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.roleType===1">超级管理账号</span>
          <span v-if="scope.row.roleType===2">普通应用账号</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">{{scope.row.status===0?'禁用':'启用'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="350" align="center" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="mini"
            v-if="scope.row.status===0"
          >启用</el-button>
          <el-button
            @click="edit(scope.row)"
            type="text"
            size="mini"
            v-if="scope.row.roleType===2"
          >编辑</el-button>
          <el-button @click="selectradio(scope.row)" type="text" size="mini">菜单分配</el-button>
          <el-button
            @click="handledelete(scope.row)"
            type="text"
            size="mini"
            v-if="scope.row.roleType===2"
          >删除</el-button>
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="mini"
            v-if="scope.row.status===1&&scope.row.roleType===2"
          >禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="角色编码" prop="name">
          <el-input v-model="ruleForm.rolereq"></el-input>
        </el-form-item>-->
        <el-form-item label="角色分类" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择角色分类">
            <el-option label="超级管理账号" value="1"></el-option>
            <el-option label="普通应用账号" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="state">
          <el-select v-model="ruleForm.state">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色说明" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleone = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="sure()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisibleorg"
      width="73%"
      title="菜单分配"
      top="2vh"
      style="font-size:14px"
      :center="true"
    >
      <div>
        <el-tree
          :data="data"
          ref="tree"
          show-checkbox
          node-key="id"
          style="height:530px;overflow:scroll"
          :props="defaultProps"
          :default-expand-all="true"
          :default-checked-keys="this.checkedarr"
          @check-change="handleCheckChange"
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleorg = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  rolemanage,
  usebutton,
  rolemanagetwo,
  addrole,
  deleterole,
  updaterole,
  getshu,
  setlimit
} from "@/api/platformmanage";
import { getmemberorg } from "@/api/organaz";
import qs from "qs";
export default {
  data() {
    return {
      data: [],
      loading: true,
      dialogVisibleorg: false,
      formInline: {
        region1: ""
      },
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      checkedarr: [],
      btnarr: [],
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {},
      ruleForm: {
        name: "",
        region: "",
        // rolereq: "",
        sec: "",
        desc: "",
        state: ""
      },

      roleid: "",
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      formInline: {
        roleName: "",
        roleType: ""
      },
      resone: [],
      arrone: [],
      tableData: [],
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择角色分类", trigger: "blur" }
        ],
        // rolereq: [
        //   { required: true, message: "请输入角色编码", trigger: "blur" }
        // ],
        state: [{ required: true, message: "请选择状态", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.rolemanageone();
    this.getrolemanage();
  },
  methods: {
    kong() {
      this.formInline.roleType = "";
      this.formInline.roleName = "";
    },

    search() {
      let data = {
        roleName: this.formInline.roleName,
        roleType: this.formInline.roleType
      };

      //  };
      rolemanagetwo(data).then(res => {
        this.tableData = res.records;
      });
    },

    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      this.resone = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      console.log(this.resone, "iiii");
      this.checkedarr = [];
      this.btnarr = [];
      res.forEach(item => {
        // arr.push(item.id);
        // console.log(item, "ll2tt");
        if (item.resourceLevel == null) {
          this.btnarr.push(item.id);
          console.log(this.btnarr, "ll2ee");
        } else {
          //   this.checkedarr.push(item.id);
          //   this.arrone = arr;
          console.log(this.checkedarr, "ll2");
        }
      });
    },

    handledelete(v) {
      this.roleid = v.roleId;

      //   this.dialogVisibleone = true;
      let data = {
        roleId: this.roleid
      };
      this.$confirm("确认删除吗？").then(_ => {
        deleterole(qs.stringify(data)).then(res => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.rolemanageone();
          this.dialogVisibleone = false;
        });
      });
    },

    add() {
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
    },
    edit(v) {
      this.ruleForm.name = v.roleName;
      //   this.ruleForm.rolereq = v.rolereq;
      this.ruleForm.region = String(v.roleType);
      console.log(typeof v.roleType, "oioi");
      this.ruleForm.sec = v.comments;
      this.ruleForm.desc = v.roleDesc;
      this.ruleForm.roleId = v.roleId;
      this.ruleForm.state = String(v.status);
      console.log(v, "pp");
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
    },
    confirmEdit(v) {
      console.log(v, "ff");
      if (this.ruleForm.name == "" || this.ruleForm.name == null) {
        this.$message.error("请输入角色名称");
        return;
      }
      //   if (this.ruleForm.rolereq == "" || this.ruleForm.rolereq == null) {
      //     this.$message.error("请输入角色编码");
      //     return;
      //   }
      if (this.ruleForm.region == "" || this.ruleForm.region == null) {
        this.$message.error("请输入角色分类");
        return;
      }
      if (this.ruleForm.state == "" || this.ruleForm.state == null) {
        this.$message.error("请选择状态");
        return;
      }
      if (this.editflag) {
        //   var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          roleId: "",
          roleName: this.ruleForm.name,
          roleType: this.ruleForm.region,
          //   rolereq: this.ruleForm.rolereq,
          comments: this.ruleForm.sec,
          roleDesc: this.ruleForm.desc,
          status: this.ruleForm.state,
          createUser: userId
        };
        addrole(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.rolemanageone();
        });
      } else {
        //var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          roleId: this.ruleForm.roleId,
          roleName: this.ruleForm.name,
          roleType: this.ruleForm.region,
          //   rolereq: this.ruleForm.rolereq,
          comments: this.ruleForm.sec,
          roleDesc: this.ruleForm.desc,
          status: this.ruleForm.state,
          createUser: userId
        };
        updaterole(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.rolemanageone();
        });
      }
    },

    handleClick(v) {
      if (v.status === 0) {
        var uuid = 1;
      } else if (v.status === 1) {
        var uuid = 0;
      }
      let data = { roleId: v.roleId, status: uuid };
      usebutton(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.rolemanageone();
      });
    },
    rolemanageone() {
      rolemanage({}).then(res => {
        (this.loading = false), (this.tableData = res.records);
        console.log(res, "ppe");
      });
    },
    selectradio(v) {
      console.log(v, "opop");
      //   this.dialogVisibleorg = !this.dialogVisibleorg;
      this.$router.push({
        name: "setMenu",
        params: {
          v: v
        }
      });
      //   var zTreeAsyncTest = "zTreeAsyncTest";
      //   this.roleId = v.roleId;
      //   let data = {
      //     roleId: v.roleId,
      //     // appId: this.formInline.region,
      //     otherParam: zTreeAsyncTest
      //   };
      //   getshu(data).then(res => {
      //     // res.records.forEach((item, i) => {
      //     //   this.options.push({ value: item.orgSeq, label: item.orgName });
      //     // });
      //     this.checkedarr = [];
      //     this.resone = [];
      //     res.records.forEach((item, i) => {
      //       if (res.records[i].checked === true) {
      //         this.resone.push(res.records[i].id);
      //         // console.log(this.checkedarr, "ppi");
      //         // this.$refs.tree.setCheckedKeys(this.checkedarr);
      //       }
      //       item.children.forEach((item2, i) => {
      //         if (item.children[i].checked === true) {
      //           this.checkedarr.push(item.children[i].id);
      //           this.resone.push(item.children[i].id);
      //           console.log(this.checkedarr, this.resone, "ppio");
      //           this.$refs.tree.setCheckedKeys(this.checkedarr);
      //         }
      //       });
      //     });

      //     this.loading = false;
      //     this.total = res.total;
      //     this.data = res.records;
      //     console.log(this.data, "ppe");
      //   });
    },
    setCheckedNodes(v) {
      console.log(v, "ppp");
    },
    onSubmit() {
      console.log(this.arrid, this.btnarr, "pfl");
      //   this.data5 = [];
      //   this.data5.push(this.rolefenid);

      let data = {
        roleId: this.roleId,
        // appId: this.formInline.region,
        key: {
          menuIds: this.resone,
          btnIds: this.btnarr
        }
      };
      setlimit(data).then(res => {
        this.$message({
          showClose: true,
          message: "菜单信息关联关系成功",
          type: "success"
        });
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.dialogVisibletwo = false;
      });
    },

    getVendorId(v) {
      this.formInline.region = v;
      console.log(v, "lll");
      this._getshu();
    },

    getrolemanage() {
      rolemanage().then(res => {
        this.tableData = res.records;
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    showRow(row) {
      //赋值给radio
      this.radio = this.tableData.indexOf(row);
      this.selected = row;
    }
  }
};
</script>
<style  lang="less" scoped>
/deep/.el-tree-node.is-expanded > .el-tree-node__children {
  display: flex;
  margin: 6px;
  flex-wrap: wrap;
}
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 0px 30px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>